<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_createTempLayer"></title>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <style>
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 300px;
        text-align: center;
        z-index: 500;
        border-radius: 4px;
      }
    </style>
  </head>
  
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="toolbar" class="panel panel-primary">
      <div class="panel-heading">
        <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer"></h5>
      </div>
      <div class="panel-body content">
        <div style="margin-bottom: 5px; text-align: left;">
          <span data-i18n="resources.text_gammaParamBounds"></span>
        </div>
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon" data-i18n="resources.text_gamma"></span>
            <input id="gammaParam" value="1" class="form-control" />
          </div>
        </div>
        <input
          type="button"
          class="btn btn-default"
          data-i18n="[value]resources.text_create"
          onclick="updateTempLayer()"
        />
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
    <div id="popup" class="ol-popup">
      <div id="popup-content"></div>
    </div>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var tempLayer,
      layerInfoService,
        newResourceID,
        result;
      var url = host + '/iserver/services/map-world/rest/maps/World';
      var map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults
          .defaults({ attributionOptions: { collapsed: false } })
          .extend([new ol.supermap.control.Logo({ link: 'https://iclient.supermap.io' })]),
        view: new ol.View({
          center: [0, 0],
          zoom: 3,
          projection: 'EPSG:4326',
          multiWorld: true
        })
      });
      createTempLayer();

      function createTempLayer() {
        new ol.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
          result = serviceResult.result;
          layer = serviceResult.result.subLayers.layers[15];
              layer.gamma = document.getElementById("gammaParam").value || 1;
              result.subLayers.layers = [layer];
              layerInfoService = new ol.supermap.LayerInfoService(url);
              layerInfoService.setLayersInfo(
                  new ol.supermap.SetLayersInfoParameters({
                    layersInfo: result
                  })
                )
                .then((res) => {
                  if (res.result && res.result.newResourceID) {
                    newResourceID = res.result.newResourceID;
                    tempLayer = new ol.layer.Tile({
                      source: new ol.source.TileSuperMapRest({
                        url: url,
                        noWrap: true,
                        cacheEnabled: false,
                        transparent: true,
                        layersID: res.result.newResourceID,
                        transparent: true
                      })
                    });
                    map.addLayer(tempLayer);
                  }
                });
        });
      }

      function updateTempLayer() {
        if (!newResourceID) {
          return;
        }
        var layer = result.subLayers.layers[0];
        layer.gamma = document.getElementById("gammaParam").value || 1;
        layerInfoService.setLayersInfo(
          new ol.supermap.SetLayersInfoParameters({
            layersInfo: result,
            resourceID: newResourceID,
            isTempLayers: true
          })
        ).then((res) => {
          tempLayer.getSource().updateParams();
        });
      }
    </script>
  </body>
</html>
